<template>
  <div :key="id">
    <ButtonGroup
      :title="`${configKey === 'titleSize' ? '标题' : '描述'}尺寸`"
      :status="`${status[currentStatus]}px`"
    >
      <el-button-group>
        <el-button :class="{ select: currentStatus === 0 }" @click="changeSize(0)">
          <font-awesome-icon icon="font" size="lg" />
        </el-button>
        <el-button :class="{ select: currentStatus === 1 }" @click="changeSize(1)">
          <font-awesome-icon icon="font" size="sm" />
        </el-button>
        <el-button :class="{ select: currentStatus === 2 }" @click="changeSize(2)">
          <font-awesome-icon icon="font" size="xs" />
        </el-button>
      </el-button-group>
    </ButtonGroup>
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue';
import ButtonGroup from './ButtonGroup/index.vue';
import type { UpdateStatus, VueComType } from '@/types';

const props = defineProps<{
  currentStatus: number;
  status: string[];
  isShow: boolean;
  configKey: string;
  editCom: VueComType;
  id: string;
}>();

const updateStatus = inject<UpdateStatus>('updateStatus');

function changeSize(size: number) {
  if (updateStatus) updateStatus(props.configKey, size);
}
</script>
